<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
      <div class="statistics-block map-block">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div id="map" class="chart"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block industry">
        <div class="corner upper-left"></div>
        <div class="corner upper-right"></div>
        <div class="corner low-right"></div>
        <div class="corner left-lower"></div>
        <div id="industry" class="chart"></div>
      </div>
      <div class="grid grid-bottom">
        <div class="grid grid-gender">
          <div class="statistics-block gender">
            <div class="corner upper-left"></div>
            <div class="corner upper-right"></div>
            <div class="corner low-right"></div>
            <div class="corner left-lower"></div>
            <div id="gender" class="chart"></div>
          </div>
          <div class="statistics-block rates">
            <div class="corner upper-left"></div>
            <div class="corner upper-right"></div>
            <div class="corner low-right"></div>
            <div class="corner left-lower"></div>
            <div id="rates" class="chart"></div>
          </div>
        </div>
        <div class="statistics-block age">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="age" class="chart"></div>
        </div>
        <div class="statistics-block education">
          <div class="corner upper-left"></div>
          <div class="corner upper-right"></div>
          <div class="corner low-right"></div>
          <div class="corner left-lower"></div>
          <div id="education" class="chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Statistics1",
  components: {},
  methods: {
    initIndustry() {
      let myCharts = this.$echarts.init(document.getElementById('industry'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        title: {
          text: '劳动力行业分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        grid: {
          left: '5%',
          right: '0',
          bottom: '20%',
        },
        color: ['#fac85a', '#93cc75'],
        legend: {
          top:10,
          right:0,
          show: true,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
          data: ['男', '女'],
        },
        xAxis: {
          data: ['农、林、牧、渔业', '采矿业', '制造业', '电力、热力、燃气及水生产和供应业', '建筑业', '交通运输、仓储和邮政业', '信息传输、软件和信息技术服务业', '批发和零售业', '住宿和餐饮业', '金融业', '房地产业', '租赁和商务服务业', '科学研究和技术服务业', '水利、环境和公共设施管理业', '居民服务、修理和其他服务业', '教育', '卫生和社会工作', '文化、体育和娱乐业', '公共管理、社会保障和社会组织', '国际组织'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 3;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#999',
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [{
          name: '男',
          type: 'bar',
          stack: '面积',
          barWidth:20,
          data: [21, 24, 28, 32, 14, 28, 32, 14, 21, 24, 28, 32, 14, 28, 32, 14, 28, 32, 14, 32],
        },
          {
            name: '女',
            type: 'bar',
            stack: '面积',
            barWidth:20,
            data: [21, 24, 28, 32, 14, 28, 32, 14, 21, 24, 28, 32, 14, 28, 32, 14, 28, 32, 14, 32],
          },
        ]
      };
      myCharts.setOption(option);
    },
    initGender() {
      let myCharts = this.$echarts.init(document.getElementById('gender'));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#E66D72', '#4EB2ED'],
        title: {
          text: '劳动力男女比例',
          top:10,
          left:'center',
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        legend: {
          top: '15%',
          right: 0,
          itemWidth: 30,
          itemHeight: 15,
          textStyle: {
            color: "#fff"
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '60%'],
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            itemStyle:{
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            labelLine: {
              show: true,
            },
            data: [
              {value: 1048, name: '女'},
              {value: 735, name: '男'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initRates() {
      let myCharts = this.$echarts.init(document.getElementById('rates'));
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#16B273', '#626062'],
        title: {
          text: '劳动力参保率',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '60%'],
            label: {
              show: true,
              position: 'center',
              formatter: '{d}%',
              color:'#fff'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '已参保'},
              {value: 735, name: '未参保'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initAge() {
      let myCharts = this.$echarts.init(document.getElementById('age'));
      let option = {
        title: {
          text: '劳动力年龄分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '劳动力年龄分布',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            data: [
              {value: 40, name: '16-24岁'},
              {value: 38, name: '25-35岁'},
              {value: 32, name: '35-45岁'},
              {value: 30, name: '45-55岁'},
              {value: 28, name: '55岁以上'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initEducation() {
      let myCharts = this.$echarts.init(document.getElementById('education'));
      let option = {
        title: {
          text: '劳动力学历分布',
          left:'center',
          top:10,
          textStyle: {
            color: '#23ffff',
            fontSize: 17,
          }
        },
        series: [
          {
            name: '劳动力学历分布',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff'
                }
              }
            },
            data: [
              {value: 40, name: '高中'},
              {value: 38, name: '大专'},
              {value: 32, name: '大学'},
              {value: 30, name: '博士及以上'},
              {value: 30, name: '中专、中技'},
            ]
          }
        ]
      };
      myCharts.setOption(option)
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));

      this.$axios.get('/static/js/szq_json.json').then((res) => {
        this.$echarts.registerMap('szqMap', res.data);
        let option = {
          geo: { // 作为底图，设置地图外围边框
            map: 'szqMap',
            itemStyle: {
              areaColor: '#fff',
              borderColor: '#333',
              borderWidth: 1,
            }
          },
          visualMap: {
            left: 'left',
            top: 'top',
            min: 0,
            inRange: {
              color: [
                '#c0e4ff',
                '#0b1f83',
              ]
            },
            textStyle: {
              color: "#fff"
            },
            calculable: true
          },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series: [
            {
              type: 'map',
              map: 'szqMap',
              itemStyle: {
                areaColor: '#fff',
                borderColor: '#333',
                borderType: [2, 4],
                borderDashOffset: 4
              },
              label: {
                normal: {
                  show: true,
                  color: '#fff',
                },
                emphasis: {
                  textStyle: {
                    color: '#fff'
                  }
                }
              },
              emphasis: { // 鼠标悬停时样式
                label: {
                  color: '#fff'
                },
                itemStyle: {
                  areaColor: '#0b1f83',
                  borderType: 'solid',
                  borderColor: 'rgb(0, 60, 131)',
                }
              },
              select: { // 选中时样式
                label: {
                  color: '#fff'
                },
                itemStyle: {
                  areaColor: '#0b1f83',
                  borderType: 'solid',
                  borderColor: 'rgb(0, 60, 131)',
                }
              },
              data: [
                {name: '西峰镇', value: 2},
                {name: '西洞镇', value: 3},
                {name: '东洞镇', value: 5},
                {name: '上坝镇', value: 6},
                {name: '金佛寺镇', value: 7},
                {name: '丰乐镇', value: 8},
                {name: '清水镇', value: 9},
                {name: '下河清镇', value: 10},
                {name: '总寨镇', value: 12},
                {name: '铧尖镇', value: 13},
                {name: '黄泥堡乡', value: 14},
                {name: '三墩镇', value: 15},
                {name: '泉湖镇', value: 16},
                {name: '银达镇', value: 17},
                {name: '果园镇', value: 18},
                {name: '玉门油田', value: 19},
                {name: '东南街', value: 20},
                {name: '西南街', value: 21},
                {name: '东北街', value: 22},
                {name: '西北街', value: 23},
                {name: '新城街', value: 24},
              ]
            }
          ]
        }
        myCharts.setOption(option)
      })
    },
  },
  mounted() {
    this.initIndustry();
    this.initGender();
    this.initRates();
    this.initAge();
    this.initEducation();
    //this.initMap();
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content {
  width: calc(100% - 60px);
  margin: 0 auto;
  margin-top: 30px;
  height: calc(100% - 140px);

  .chart {
    width: 100%;
    height: 100%;
  }

  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    box-shadow: $boxshadow;
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }

  .grid.grid-left {
    width: calc(40% - 5px);
    margin-right: 10px;
  }

  .grid.grid-right {
    width: calc(60% - 5px);

    .grid.grid-bottom {
      height: calc(55% - 5px);
      width: 100%;
      margin-top: 10px;
      display: flex;
      flex-direction: row;

      .statistics-block.age, .statistics-block.education, {
        width: calc((100% - 20px) / 8 * 3);
        margin-left: 10px;
      }

      .grid.grid-gender {
        height: 100%;
        width: calc((100% - 20px) / 8 * 2);
        display: flex;
        flex-direction: column;

        .statistics-block {
          width: 100%;
          height: calc(50% - 5px);
        }

        .statistics-block.rates {
          margin-top: 10px;
        }
      }
    }
  }

  .statistics-block.map-block {
    width: 100%;
    height: 100%;
  }

  .statistics-block.industry {
    width: 100%;
    height: calc(45% - 5px)
  }
}
</style>
